<template>
	<div id="top">
		<div id="head-nav">
			<div class="wrap clearfixed">
				<div class="selectCity" v-if="this.$route.path=='/index'">
					<label for="city">成都市</label>
					<span @click="cutCity">[切换城市]</span>
				</div>
				<el-menu :default-active="activeIndex" router class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#00bfff">
					<el-menu-item v-for="(item,index) in navlist" :key="index" :index="item.path">{{item.name}}</el-menu-item>
				</el-menu>
				<div class="login-register">
					<router-link to="message">消息</router-link>
					<router-link to="onlineresume" class="show-resume">简历</router-link>·
					<router-link to="onlineresume" class="upload-resume-btn">上传</router-link>
					<!--<router-link to="onlineresume" class="company-btn">企业</router-link>-->
					<a href="javascript:;" class="company-btn">企业</a>
					<!--{{isShow}}-->
					<i class="el-icon-user-solid" style="color: #fff;"></i>
					<a @click="login" href="javascript:;" v-if="isShow">登陆</a>
					<a @click="register" href="javascript:;" v-if="isShow">注册</a>
				</div>
			</div>
		</div>

		<div class="wrap-log-box">
			<el-dialog title="" :visible.sync="dialogFormVisible" width="500px" :close-on-click-modal="false" @closed="dialogFormClose">
				<h1>万息招聘</h1>
				<div class="wx-box">
					<!--<router-view></router-view>-->
					<people-login v-show="infiner" @fun1="getFun1"></people-login>
					<people-register v-show="!infiner" @fun1="getFun1"></people-register>
					
				</div>
			</el-dialog>
		</div>
		<div class="select-city">
			<el-dialog title="城市选择" :visible.sync="dialogVisible" width="50%" :before-close="handleClose" :close-on-click-modal="false">
				<div class="selectcity-hit">
					<p style="font-size: 16px;margin: 10px 0;">亲爱的用户您好：</p>
					<p style="padding: 0 0 20px; border-bottom: 1px solid #ccc;">切换城市分站，让我们为您提供更准确的信息</p>
				</div>
				<div class="citys-box">
					<p>当前定位</p>
					<a href="javascript:;" class="local-position"><i class="iconfont icon-location"></i>成都市</a>
					<p>点击返回"<span class="all-globol">全国站</span>"或切换到以下城市</p>
					<ul class="sort-list">
						<li v-for="item in 20" :key="item">
							<a href="javascript:;" @click="cityItem">全国站</a>
						</li>
					</ul>
					<p class="orther-sort" style="font-size: 12px; color: #999;">其他分站开通中，敬请期待~</p>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import login from './login'
	import register from './register'
	export default {
		components:{'people-login':login,'people-register':register},
		props: ['msg'],
		data() {
			return {
				navlist: [{
					name: '首页',
					path: '/index'
				}, {
					name: '职位',
					path: '/navlist'
				}, {
					name: '公司',
					path: '/firm'
				}, {
					name: '资讯',
					path: '/info'
				}, ],
				//{name: '上传简历',path: '/person'}
				activeIndex: this.msg,
				dialogFormVisible: false,
				dialogVisible: false,
				isShow:true,
				infiner:true,
			}
		},
		methods: {
			login() {
				this.dialogFormVisible = true;
				this.infiner = true;
//				this.$router.push("login");
			},
			register() {
				this.dialogFormVisible = true;
				this.infiner = false;
//				this.$router.push("register");
			},
			dialogFormClose() {
//				this.$router.push("index");
			},
			handleSelect() {

			},
			//关闭城市选择框
			handleClose() {
				this.dialogVisible = false;
			},
			cutCity() {
				this.dialogVisible = true;
			},
			//选择一个城市之后
			cityItem(){
				this.dialogVisible = false;
			},
			//登录接收子组件方法
			getFun1(data){
				console.log(data)
				this.infiner = data;
//				this.isShow = data;
				console.log(this.isShow,data);
				return data;
			}
		},
		mounted(){
//			var _this = this;
////			this.$nextTick(function(){
////				_this.isShow = _this.getFun1();
////			})
//			this.$nextTick(()=>{
//				this.isShow = this.getFun1();
//			})
		}
	}
</script>

<style scoped>
	#head-nav {
		background: #545c64;
	}
	
	#top .el-menu-demo {
		height: 49px;
		margin-left: 100px;
		float: left;
	}
	
	#top .el-menu--horizontal>.el-menu-item {
		height: 100%;
	}
	
	#top .el-menu--horizontal>.el-menu-item {
		line-height: 49px;
	}
	
	#top .is-active {
		background-color: rgba(67, 74, 80) !important;
	}
	
	#top .el-menu.el-menu--horizontal {
		border-bottom: none;
	}
	
	.selectCity {
		float: left;
		color: #fff;
		line-height: 49px;
	}
	
	.selectCity label {
		color: #00bfff;
	}
	
	.selectCity span {
		font-size: 14px;
		margin-left: 10px;
		cursor: pointer;
	}
	/*登录*/
	
	.login-register {
		float: right;
		line-height: 49px;
		color: #fff;
		/*height: 49px;*/
		/*border: 1px solid red;*/
	}
	
	.login-register a {
		font-size: 14px;
		color: #fff;
		display: inline-block;
		margin-right: 20px;
		/*margin-left: 20px;*/
	}
	
	.login-register .el-badge {
		vertical-align: auto;
	}
	
	.login-register .show-resume {
		margin-right: 10px;
	}
	/*登陸和注冊*/
	
	.wrap-log-box {
		text-align: center;
	}
	
	.wrap-log-box h1 {
		color: #00bfff;
	}
	
	.wx-box {
		min-height: 400px;
		/* border: 1px solid red; */
		width: 100%;
	}
	
	
	/*选择城市*/
	.select-city .el-dialog__header{
		background-color: #00CFFF;
		color: #fff;
		border: 1px solid red;
	}
	.select-city .el-dialog__title{
		color: #fff;
	}
	
	.local-position{
		border: 1px solid #ccc;
		font-size: 16px;
		padding: 5px;
		color: #333;
		display: inline-block;
		margin: 10px 0;
	}
	.local-position i{
		color: #00CFFF;
		margin-right: 3px;
	}
	.local-position:hover{
		border: 1px solid #00CFFF;
		color: #00CFFF;
	}
	.all-globol{
		color: #00CFFF;
	}
	.sort-list{
		overflow: hidden;
		padding: 10px 0;
	}
	.sort-list li{
		float: left;
		width: 20%;
	}
	.sort-list li a{
		display: inline-block;
		padding: 8px 25px;
		margin-bottom: 15px;
		border: 1px solid #ddd;
		color: #888;
		transition: all .3s;
	}
	.sort-list li a:hover{
		background-color: #00CFFF;
		color: #fff;
	}
</style>
<style>
	.select-city .el-dialog__header{
		background-color: #00CFFF;
		color: #fff;
	}
</style>